<template>
  <div class="GykjMap-mountainPond">
    <div class="GykjMap-mountainPond-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false">
        <TabPane label="基本情况" name="info"></TabPane>
        <TabPane label="非工程措施" name="measures"></TabPane>
      </Tabs>
    </div>
    <div class="GykjMap-mountainPond-content">
      <div class="GykjMap-mountainPond-table" v-show="activeTab === 'info'">
        <table class="table" border>
          <tbody>
            <tr>
              <td class="key">类型</td>
              <td colspan="3">{{fliterData('类型')}}</td>
            </tr>
            <tr>
              <td class="key">名称</td>
              <td>{{fliterData('名称')}}</td>
              <td class="key">工程所在地</td>
              <td>{{fliterData('工程所在地')}}</td>
            </tr>
            <tr>
              <td class="key">建设时间(年)</td>
              <td>{{fliterData('建设时间(年)')}}</td>
              <td class="key">工程等级</td>
              <td>{{fliterData('工程等级')}}</td>
            </tr>
            <tr>
              <td class="key">总库容（万m³）</td>
              <td>{{fliterData('总库容（万m³）')}}</td>
              <td class="key">调节库容（万m³）</td>
              <td>{{fliterData('调节库容（万m³）')}}</td>
            </tr>
            <tr>
              <td class="key">受影响人员数(万人)</td>
              <td>{{fliterData('受影响人员数(万人)')}}</td>
              <td class="key">设计洪水标准（重现期）</td>
              <td>{{fliterData('设计洪水标准（重现期）')}}</td>
            </tr>
            <tr>
              <td class="key">设计洪水位（m）</td>
              <td>{{fliterData('设计洪水位（m）')}}</td>
              <td class="key">校核洪水标准(重现期)</td>
              <td>{{fliterData('校核洪水标准(重现期)')}}</td>
            </tr>
            <tr>
              <td class="key">校核洪水位（m）</td>
              <td>{{fliterData('校核洪水位（m）')}}</td>
              <td class="key">设计洪峰流量（m³/s）</td>
              <td>{{fliterData('设计洪峰流量（m³/s）')}}</td>
            </tr>
            <tr>
              <td class="key">校核洪峰流量（m³/s）</td>
              <td>{{fliterData('校核洪峰流量（m³/s）')}}</td>
              <td class="key">管理单位</td>
              <td>{{fliterData('管理单位')}}</td>
            </tr>
            <tr>
              <td class="key">主管部门</td>
              <td>{{fliterData('主管部门')}}</td>
              <td class="key">工程任务</td>
              <td>{{fliterData('工程任务')}}</td>
            </tr>
            <tr>
              <td class="key">信息化设备</td>
              <td>{{fliterData('信息化设备')}}</td>
              <td class="key">重要保护对象</td>
              <td>{{fliterData('重要保护对象')}}</td>
            </tr>
            <tr>
              <td rowspan="3">
                安全鉴定
              </td>
              <td>是否进行过安全鉴定</td>
              <td>{{fliterDouData('"安全综合评价."是否进行过安全综合评价')}}</td>
            </tr>
            <tr>
              <td>时间</td>
              <td>主要结论</td>
              <td>安全类别</td>
            </tr>
            <tr>
              <td>{{fliterDouData('"安全综合评价."时间')}}</td>
              <td>{{fliterDouData('"安全综合评价."主要结论')}}</td>
              <td>{{fliterDouData('"安全综合评价."安全类别')}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="GykjMap-mountainPond-table" v-show="activeTab === 'measures'">

        <div>
          <base-title title="防汛责任制" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key"></td>
                <td class="key">防汛行政责任人</td>
                <td class="key">防汛技术责任人</td>
                <td class="key">管理单位负责人</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="key">{{fliterDouData('防汛行政责任人.姓名')}}</td>
                <td class="key">{{fliterDouData('防汛技术责任人.姓名')}}</td>
                <td class="key">{{fliterDouData('管理单位负责人.姓名')}}</td>
              </tr>
              <tr>
                <td class="key">单位</td>
                <td class="key">{{fliterDouData('防汛行政责任人.单位')}}</td>
                <td class="key">{{fliterDouData('防汛技术责任人.单位')}}</td>
                <td class="key">{{fliterDouData('管理单位负责人.单位')}}</td>
              </tr>
              <tr>
                <td class="key">职务</td>
                <td class="key">{{fliterDouData('防汛行政责任人.职务')}}</td>
                <td class="key">{{fliterDouData('防汛技术责任人.职务')}}</td>
                <td class="key">{{fliterDouData('管理单位负责人.职务')}}</td>
              </tr>
              <tr>
                <td class="key">电话</td>
                <td class="key">{{fliterDouData('防汛行政责任人.电话')}}</td>
                <td class="key">{{fliterDouData('防汛技术责任人.电话')}}</td>
                <td class="key">{{fliterDouData('管理单位负责人.电话')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div style="margin: 10px 0;">
          <base-title title="应急预案" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key">1</td>
                <td class="key">防洪预案</td>
                <td class="key">是否编制</td>
                <td class="center">{{fliterData('防洪预案是否编制')}}</td>
              </tr>
              <tr>
                <td class="key">2</td>
                <td class="key">大坝安全管理应急预案</td>
                <td class="key">是否编制</td>
                <td class="center">{{fliterData('大坝安全管理应急预案')}}</td>
              </tr>
              <tr>
                <td class="key">3</td>
                <td class="key">群众转移方案</td>
                <td class="key">是否编制</td>
                <td class="center">{{fliterData('群众转移方案是否编制')}}</td>
              </tr>
              <tr>
                <td class="key">4</td>
                <td class="key">其他相关预案(名称)</td>
                <td class="center" colspan="2">{{fliterData('其他相关预案(名称)')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div>
          <base-title title="应急抢险" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key" rowspan="3">抢险队伍</td>
                <td class="key" colspan="2" rowspan="2">人数（人)</td>
                <td class="key" colspan="2">负责人</td>
                <td class="key" colspan="2">联系人</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="key">电话</td>
                <td class="key">姓名</td>
                <td class="key">电话</td>
              </tr>
              <tr>
                <td class="center" colspan="2">{{fliterDouData('抢险队伍.人数（人)')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.负责人电姓名')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.负责人电话')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.联系人姓名')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.联系人电话')}}</td>

              </tr>
              <tr>
                <td class="key" rowspan="2">防汛抢险物资储备现状情况</td>
                <td class="key">袋类（条）</td>
                <td class="key">土工布（m²）</td>
                <td class="key">砂石(m³)</td>
                <td class="key">块石（m³）</td>
                <td class="key">救生衣(件)</td>
                <td class="key">存放点与水库(山塘)距离（m）</td>
              </tr>
              <tr>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.袋类（条）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.土工布（m²）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.砂石(m³)')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.块石（m³）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.救生衣(件)')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.存放点与水库(山塘)距离（m）')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import BaseTitle from '../../public/base-title/base-title'

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseTitle
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info'
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
      this.activeTab = 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-mountainPond {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-mountainPond-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-mountainPond-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 5px;
    .GykjMap-mountainPond-table {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 5px;
      .table {
        width: 100%;
        margin: auto;
        font-size: 14px;
        border: 1px solid #ddd;
        margin: 5px 0;
        td {
          padding: 5px;
          &.key {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
